<!-- 即时聊天记录 -->
<template>
  <div id="GroupInstantMessaging">
    <div id="Main">
      <!-- 头部 -->
      <Head title="即时聊天记录" BackType1="true"></Head>
      <!-- 搜索 -->
      <Search placeholder="搜索"></Search>
      <div class="msgList">
        <van-cell
          v-for="(item, index) in lists"
          clickable
          :key="item.choose"
          @click="toggle(index)"
        >
          <van-checkbox :name="item.choose" ref="checkboxes" v-model="item.choose"/>

          <div class="MessageBox">
            <img :src="item.img" alt>
            <div>
              <h5>{{item.name}}</h5>
              <span>{{item.content}}</span>
            </div>
          </div>
        </van-cell>
      </div>
      <div class="EntireSelection">
        <div>
          <van-checkbox @click="EntireChoose()" v-model="judga">全选</van-checkbox>
        </div>
        <van-button type="info" @click="del">删除</van-button>
      </div>
    </div>
  </div>
</template>

<script>
import Head from "../components/Head.vue";
import Search from "@/components/Search";
import { Checkbox, CheckboxGroup } from "vant";
import { Cell, CellGroup } from "vant";
import { Button } from "vant";
import { Dialog } from "vant";
import Img from "../assets/img/NoPic.png";

export default {
  data() {
    return {
      judga: false,
      uploadDate: [],
      lists: [
        {
          img: Img,
          name: "A里bb",
          choose: false,
          content: "一些聊天内容"
        },
        {
          img: Img,
          name: "A里bb",
          choose: false,
          content: "一些聊天内容"
        },
        {
          img: Img,
          name: "A里bb",
          choose: false,
          content: "一些聊天内容"
        },
        {
          img: Img,
          name: "A里bb",
          choose: false,
          content: "一些聊天内容"
        },
        {
          img: Img,
          name: "A里bb",
          choose: false,
          content: "一些聊天内容"
        },
        {
          img: Img,
          name: "A里bb",
          choose: false,
          content: "一些聊天内容"
        }
      ]
    };
  },
  components: {
    Head,
    Search,
    [Checkbox.name]: Checkbox,
    [CheckboxGroup.name]: CheckboxGroup,
    [Cell.name]: Cell,
    [CellGroup.name]: CellGroup,
    [Button.name]: Button,
    [Dialog.name]: Dialog
  },
  methods: {
    toggle(index) {
      this.judga = false;
      if (!this.lists[index].choose) {
        this.lists[index].choose = true;
        this.uploadDate.push(this.lists[index]);
      } else {
        this.lists[index].choose = false;
        this.uploadDate.splice(index, 1);
      }
    },
    EntireChoose() {
      var val = this.judga;
      if (val == true) {
        this.judga = true;
        this.lists.forEach(element => {
          this.$set(element, "choose", true);
        });
        this.uploadDate = this.lists;
      } else {
        this.judga = false;
        this.lists.forEach(element => {
          this.$set(element, "choose", false);
        });
        this.uploadDate = [];
      }
    },
    del() {
      if (this.uploadDate == undefined || this.uploadDate.length <= 0) {
        return;
      }
      Dialog.confirm({
          title:"提示",
          message: "确定删除聊天内容？"
        })
          .then(() => {
            this.lists = this.lists.filter(val => {
              return val.choose != true;
            });
          })
          .catch(() => {
            // on cancel
          });
    }
  },
  created() {
    // this.result = this.lists;
    // this.result.forEach(element => {
    //   this.$set(element,"judge",false)
    // });
    // console.log(this.result)
  }
};
</script>

<style lang="less" scoped>
#GroupInstantMessaging {
  #Main {
    position: fixed;
    top: 88px;
    overflow: scroll;
    width: 100%;
    .msgList {
      .van-cell::after {
        border-bottom: none;
      }
      .van-cell {
        padding: 0;
        .van-cell__value--alone {
          display: flex;
          justify-content: flex-start;
          align-items: center;
          .van-checkbox {
            margin-left: 30px;
          }
          .MessageBox {
            width: 647px;
            height: 149px;
            display: flex;
            justify-content: flex-start;
            align-items: center;
            margin-left: 30px;
            border-bottom: 1px solid #e5e5e5;
            img {
              display: block;
              width: 80px;
              height: 80px;
            }
            div {
              padding-left: 21px;
              h5 {
                font-size: 26px;
                color: #989794;
              }
              span {
                font-size: 30px;
                color: #333333;
              }
            }
          }
        }
      }
    }
    .EntireSelection {
      position: fixed;
      bottom: 0;
      width: 750px;
      height: 98px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      div {
        width: 510px;
        height: 98px;
        background-color: #ffffff;
        .van-checkbox {
          width: 100%;
          height: 100%;
          font-size: 32px;
          color: #333333;
          line-height: 98px;
          margin-left: 30px;
        }
      }
      .van-button {
        width: 240px;
        height: 98px;
        background-color: #677ce9;
        span {
          font-size: 32px;
          color: #ffffff;
        }
      }
    }
  }
}
</style>